<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2938129" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe602;</span>
                <div class="name">AK-IN_闭眼</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67f;</span>
                <div class="name">显示</div>
                <div class="code-name">&amp;#xe67f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62b;</span>
                <div class="name">电量不足</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63b;</span>
                <div class="name">pc</div>
                <div class="code-name">&amp;#xe63b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe654;</span>
                <div class="name">h5e</div>
                <div class="code-name">&amp;#xe654;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe636;</span>
                <div class="name">小程序</div>
                <div class="code-name">&amp;#xe636;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64e;</span>
                <div class="name">tag</div>
                <div class="code-name">&amp;#xe64e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75b;</span>
                <div class="name">radio_box</div>
                <div class="code-name">&amp;#xe75b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe740;</span>
                <div class="name">pdf</div>
                <div class="code-name">&amp;#xe740;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">图片列表</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e4;</span>
                <div class="name">时间日期</div>
                <div class="code-name">&amp;#xe6e4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb94;</span>
                <div class="name">表单组件-下拉框</div>
                <div class="code-name">&amp;#xeb94;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe630;</span>
                <div class="name">多行文本</div>
                <div class="code-name">&amp;#xe630;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73b;</span>
                <div class="name">video</div>
                <div class="code-name">&amp;#xe73b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb3f;</span>
                <div class="name">24gl-calendar</div>
                <div class="code-name">&amp;#xeb3f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe90d;</span>
                <div class="name">Field-number</div>
                <div class="code-name">&amp;#xe90d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ad;</span>
                <div class="name">地图</div>
                <div class="code-name">&amp;#xe8ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d3;</span>
                <div class="name">m-富文本</div>
                <div class="code-name">&amp;#xe7d3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71f;</span>
                <div class="name">输入框</div>
                <div class="code-name">&amp;#xe71f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a2;</span>
                <div class="name">map</div>
                <div class="code-name">&amp;#xe6a2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe652;</span>
                <div class="name">数据中心—数据仓库</div>
                <div class="code-name">&amp;#xe652;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe673;</span>
                <div class="name">收款</div>
                <div class="code-name">&amp;#xe673;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec34;</span>
                <div class="name">告警</div>
                <div class="code-name">&amp;#xec34;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64c;</span>
                <div class="name">充电器</div>
                <div class="code-name">&amp;#xe64c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62f;</span>
                <div class="name">用户管理</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe699;</span>
                <div class="name">img</div>
                <div class="code-name">&amp;#xe699;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe642;</span>
                <div class="name">表格</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe674;</span>
                <div class="name">卡片</div>
                <div class="code-name">&amp;#xe674;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d6;</span>
                <div class="name">83-分页</div>
                <div class="code-name">&amp;#xe6d6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">更多列表</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe634;</span>
                <div class="name">2.多行文本</div>
                <div class="code-name">&amp;#xe634;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">add</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
                <div class="name">关闭</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe609;</span>
                <div class="name">保存文书</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">打印</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60c;</span>
                <div class="name">file-pdf</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe669;</span>
                <div class="name">解锁</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe638;</span>
                <div class="name">转下级</div>
                <div class="code-name">&amp;#xe638;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe632;</span>
                <div class="name">轮播图</div>
                <div class="code-name">&amp;#xe632;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb05;</span>
                <div class="name">箭头_切换向下</div>
                <div class="code-name">&amp;#xeb05;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb06;</span>
                <div class="name">箭头_切换向上</div>
                <div class="code-name">&amp;#xeb06;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
                <div class="name">后退</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe619;</span>
                <div class="name">前进</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9ee;</span>
                <div class="name">24gl-pictureSplit</div>
                <div class="code-name">&amp;#xe9ee;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9f1;</span>
                <div class="name">24gl-pictures</div>
                <div class="code-name">&amp;#xe9f1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec81;</span>
                <div class="name">无序排列</div>
                <div class="code-name">&amp;#xec81;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec84;</span>
                <div class="name">有序排列</div>
                <div class="code-name">&amp;#xec84;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61d;</span>
                <div class="name">浏览</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec83;</span>
                <div class="name">字体加粗</div>
                <div class="code-name">&amp;#xec83;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
                <div class="name">打印机</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe656;</span>
                <div class="name">复制</div>
                <div class="code-name">&amp;#xe656;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
                <div class="name">链接</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec80;</span>
                <div class="name">居中对齐</div>
                <div class="code-name">&amp;#xec80;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec82;</span>
                <div class="name">右对齐</div>
                <div class="code-name">&amp;#xec82;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec85;</span>
                <div class="name">字体下划线</div>
                <div class="code-name">&amp;#xec85;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec86;</span>
                <div class="name">字体斜体</div>
                <div class="code-name">&amp;#xec86;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec87;</span>
                <div class="name">左对齐</div>
                <div class="code-name">&amp;#xec87;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62a;</span>
                <div class="name">全选</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">撤销</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb04;</span>
                <div class="name">24gl-fontSize</div>
                <div class="code-name">&amp;#xeb04;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60b;</span>
                <div class="name">剪切</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaef;</span>
                <div class="name">字体颜色</div>
                <div class="code-name">&amp;#xeaef;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe647;</span>
                <div class="name">橡皮擦</div>
                <div class="code-name">&amp;#xe647;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe655;</span>
                <div class="name">背景色</div>
                <div class="code-name">&amp;#xe655;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe640;</span>
                <div class="name">挂断</div>
                <div class="code-name">&amp;#xe640;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe641;</span>
                <div class="name">接听</div>
                <div class="code-name">&amp;#xe641;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61b;</span>
                <div class="name">电话</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63f;</span>
                <div class="name">视频</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
                <div class="name">笑脸</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ba;</span>
                <div class="name">图片</div>
                <div class="code-name">&amp;#xe8ba;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66d;</span>
                <div class="name">夜间</div>
                <div class="code-name">&amp;#xe66d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe614;</span>
                <div class="name">晴_白天</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">微信</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe782;</span>
                <div class="name">刷新</div>
                <div class="code-name">&amp;#xe782;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe651;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe651;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b9;</span>
                <div class="name">下拉</div>
                <div class="code-name">&amp;#xe6b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe612;</span>
                <div class="name">支付宝支付</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62d;</span>
                <div class="name">通知</div>
                <div class="code-name">&amp;#xe62d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67a;</span>
                <div class="name">右箭头</div>
                <div class="code-name">&amp;#xe67a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70f;</span>
                <div class="name">设置</div>
                <div class="code-name">&amp;#xe70f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe885;</span>
                <div class="name">github-fill</div>
                <div class="code-name">&amp;#xe885;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe88d;</span>
                <div class="name">facebook-fill</div>
                <div class="code-name">&amp;#xe88d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe633;</span>
                <div class="name">缩小</div>
                <div class="code-name">&amp;#xe633;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe685;</span>
                <div class="name">放大</div>
                <div class="code-name">&amp;#xe685;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe623;</span>
                <div class="name">左箭头</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe672;</span>
                <div class="name">中英文 英文-01</div>
                <div class="code-name">&amp;#xe672;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a6;</span>
                <div class="name">close_fill</div>
                <div class="code-name">&amp;#xe6a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64b;</span>
                <div class="name">设置</div>
                <div class="code-name">&amp;#xe64b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe667;</span>
                <div class="name">attachment</div>
                <div class="code-name">&amp;#xe667;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66e;</span>
                <div class="name">edit</div>
                <div class="code-name">&amp;#xe66e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66f;</span>
                <div class="name">eye-close</div>
                <div class="code-name">&amp;#xe66f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe670;</span>
                <div class="name">email</div>
                <div class="code-name">&amp;#xe670;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe671;</span>
                <div class="name">file-common</div>
                <div class="code-name">&amp;#xe671;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe676;</span>
                <div class="name">fullscreen-shrink</div>
                <div class="code-name">&amp;#xe676;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe675;</span>
                <div class="name">fullscreen-expand</div>
                <div class="code-name">&amp;#xe675;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe677;</span>
                <div class="name">map</div>
                <div class="code-name">&amp;#xe677;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe678;</span>
                <div class="name">help</div>
                <div class="code-name">&amp;#xe678;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe679;</span>
                <div class="name">modular</div>
                <div class="code-name">&amp;#xe679;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67b;</span>
                <div class="name">pin</div>
                <div class="code-name">&amp;#xe67b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67c;</span>
                <div class="name">save</div>
                <div class="code-name">&amp;#xe67c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67d;</span>
                <div class="name">search</div>
                <div class="code-name">&amp;#xe67d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67e;</span>
                <div class="name">scanning</div>
                <div class="code-name">&amp;#xe67e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec08;</span>
                <div class="name">刷新</div>
                <div class="code-name">&amp;#xec08;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63e;</span>
                <div class="name">图片</div>
                <div class="code-name">&amp;#xe63e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d5;</span>
                <div class="name">文本编辑</div>
                <div class="code-name">&amp;#xe6d5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74b;</span>
                <div class="name">删除</div>
                <div class="code-name">&amp;#xe74b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe657;</span>
                <div class="name">活动</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60e;</span>
                <div class="name">admin-manage</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe680;</span>
                <div class="name">股票-首页</div>
                <div class="code-name">&amp;#xe680;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ae;</span>
                <div class="name">user</div>
                <div class="code-name">&amp;#xe7ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60d;</span>
                <div class="name">reduce</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62e;</span>
                <div class="name">编辑文章</div>
                <div class="code-name">&amp;#xe62e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe689;</span>
                <div class="name">add</div>
                <div class="code-name">&amp;#xe689;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe624;</span>
                <div class="name">展开菜单</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64d;</span>
                <div class="name">时间</div>
                <div class="code-name">&amp;#xe64d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe622;</span>
                <div class="name">收起菜单</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe646;</span>
                <div class="name">close</div>
                <div class="code-name">&amp;#xe646;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a3;</span>
                <div class="name">right</div>
                <div class="code-name">&amp;#xe6a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe628;</span>
                <div class="name">left</div>
                <div class="code-name">&amp;#xe628;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe650;</span>
                <div class="name">to left</div>
                <div class="code-name">&amp;#xe650;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb71;</span>
                <div class="name">菜单_o</div>
                <div class="code-name">&amp;#xeb71;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
                <div class="name">勾选</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe665;</span>
                <div class="name">arrow-down</div>
                <div class="code-name">&amp;#xe665;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1729161661996') format('woff2'),
       url('iconfont.woff?t=1729161661996') format('woff'),
       url('iconfont.ttf?t=1729161661996') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont dx-in_biyan"></span>
            <div class="name">
              AK-IN_闭眼
            </div>
            <div class="code-name">.dx-in_biyan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-xianshi_huaban"></span>
            <div class="name">
              显示
            </div>
            <div class="code-name">.dx-xianshi_huaban
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-dianliangbuzu"></span>
            <div class="name">
              电量不足
            </div>
            <div class="code-name">.dx-dianliangbuzu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-pc"></span>
            <div class="name">
              pc
            </div>
            <div class="code-name">.dx-pc
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-h5e"></span>
            <div class="name">
              h5e
            </div>
            <div class="code-name">.dx-h5e
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-xiaochengxu"></span>
            <div class="name">
              小程序
            </div>
            <div class="code-name">.dx-xiaochengxu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-tag"></span>
            <div class="name">
              tag
            </div>
            <div class="code-name">.dx-tag
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-radiobox"></span>
            <div class="name">
              radio_box
            </div>
            <div class="code-name">.dx-radiobox
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-pdf"></span>
            <div class="name">
              pdf
            </div>
            <div class="code-name">.dx-pdf
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-ai-img-list"></span>
            <div class="name">
              图片列表
            </div>
            <div class="code-name">.dx-ai-img-list
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-shijianriqi"></span>
            <div class="name">
              时间日期
            </div>
            <div class="code-name">.dx-shijianriqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-biaodanzujian-xialakuang"></span>
            <div class="name">
              表单组件-下拉框
            </div>
            <div class="code-name">.dx-biaodanzujian-xialakuang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-duohangwenben"></span>
            <div class="name">
              多行文本
            </div>
            <div class="code-name">.dx-duohangwenben
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-video"></span>
            <div class="name">
              video
            </div>
            <div class="code-name">.dx-video
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-24gl-calendar"></span>
            <div class="name">
              24gl-calendar
            </div>
            <div class="code-name">.dx-24gl-calendar
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-Field-number"></span>
            <div class="name">
              Field-number
            </div>
            <div class="code-name">.dx-Field-number
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-ditu"></span>
            <div class="name">
              地图
            </div>
            <div class="code-name">.dx-ditu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-m-fuwenben"></span>
            <div class="name">
              m-富文本
            </div>
            <div class="code-name">.dx-m-fuwenben
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-shurukuang"></span>
            <div class="name">
              输入框
            </div>
            <div class="code-name">.dx-shurukuang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-map1"></span>
            <div class="name">
              map
            </div>
            <div class="code-name">.dx-map1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-shujuzhongxinshujucangku"></span>
            <div class="name">
              数据中心—数据仓库
            </div>
            <div class="code-name">.dx-shujuzhongxinshujucangku
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-shoukuan"></span>
            <div class="name">
              收款
            </div>
            <div class="code-name">.dx-shoukuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-gaojing"></span>
            <div class="name">
              告警
            </div>
            <div class="code-name">.dx-gaojing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-chongdianqi"></span>
            <div class="name">
              充电器
            </div>
            <div class="code-name">.dx-chongdianqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-yonghuguanli_huaban"></span>
            <div class="name">
              用户管理
            </div>
            <div class="code-name">.dx-yonghuguanli_huaban
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-img"></span>
            <div class="name">
              img
            </div>
            <div class="code-name">.dx-img
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-biaoge"></span>
            <div class="name">
              表格
            </div>
            <div class="code-name">.dx-biaoge
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-qiapian"></span>
            <div class="name">
              卡片
            </div>
            <div class="code-name">.dx-qiapian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx--fenye"></span>
            <div class="name">
              83-分页
            </div>
            <div class="code-name">.dx--fenye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-gengduoliebiao"></span>
            <div class="name">
              更多列表
            </div>
            <div class="code-name">.dx-gengduoliebiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-a-2duohangwenben"></span>
            <div class="name">
              2.多行文本
            </div>
            <div class="code-name">.dx-a-2duohangwenben
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-add1"></span>
            <div class="name">
              add
            </div>
            <div class="code-name">.dx-add1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-guanbi"></span>
            <div class="name">
              关闭
            </div>
            <div class="code-name">.dx-guanbi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-baocunwenshu"></span>
            <div class="name">
              保存文书
            </div>
            <div class="code-name">.dx-baocunwenshu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-dayin"></span>
            <div class="name">
              打印
            </div>
            <div class="code-name">.dx-dayin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-file-pdf"></span>
            <div class="name">
              file-pdf
            </div>
            <div class="code-name">.dx-file-pdf
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-jiesuo"></span>
            <div class="name">
              解锁
            </div>
            <div class="code-name">.dx-jiesuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-zhuanxiaji"></span>
            <div class="name">
              转下级
            </div>
            <div class="code-name">.dx-zhuanxiaji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-lunbotu"></span>
            <div class="name">
              轮播图
            </div>
            <div class="code-name">.dx-lunbotu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-jiantou_qiehuanxiangxia"></span>
            <div class="name">
              箭头_切换向下
            </div>
            <div class="code-name">.dx-jiantou_qiehuanxiangxia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-jiantou_qiehuanxiangshang"></span>
            <div class="name">
              箭头_切换向上
            </div>
            <div class="code-name">.dx-jiantou_qiehuanxiangshang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-houtui"></span>
            <div class="name">
              后退
            </div>
            <div class="code-name">.dx-houtui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-qianjin"></span>
            <div class="name">
              前进
            </div>
            <div class="code-name">.dx-qianjin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-24gl-pictureSplit"></span>
            <div class="name">
              24gl-pictureSplit
            </div>
            <div class="code-name">.dx-24gl-pictureSplit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-24gl-pictures"></span>
            <div class="name">
              24gl-pictures
            </div>
            <div class="code-name">.dx-24gl-pictures
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-wuxupailie"></span>
            <div class="name">
              无序排列
            </div>
            <div class="code-name">.dx-wuxupailie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-youxupailie"></span>
            <div class="name">
              有序排列
            </div>
            <div class="code-name">.dx-youxupailie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-liulan-copy"></span>
            <div class="name">
              浏览
            </div>
            <div class="code-name">.dx-liulan-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-zitijiacu"></span>
            <div class="name">
              字体加粗
            </div>
            <div class="code-name">.dx-zitijiacu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-24px"></span>
            <div class="name">
              打印机
            </div>
            <div class="code-name">.dx-24px
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-fuzhi"></span>
            <div class="name">
              复制
            </div>
            <div class="code-name">.dx-fuzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-icon-"></span>
            <div class="name">
              链接
            </div>
            <div class="code-name">.dx-icon-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-juzhongduiqi"></span>
            <div class="name">
              居中对齐
            </div>
            <div class="code-name">.dx-juzhongduiqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-youduiqi"></span>
            <div class="name">
              右对齐
            </div>
            <div class="code-name">.dx-youduiqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-zitixiahuaxian"></span>
            <div class="name">
              字体下划线
            </div>
            <div class="code-name">.dx-zitixiahuaxian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-zitixieti"></span>
            <div class="name">
              字体斜体
            </div>
            <div class="code-name">.dx-zitixieti
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-zuoduiqi"></span>
            <div class="name">
              左对齐
            </div>
            <div class="code-name">.dx-zuoduiqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-quanxuan"></span>
            <div class="name">
              全选
            </div>
            <div class="code-name">.dx-quanxuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-chexiao"></span>
            <div class="name">
              撤销
            </div>
            <div class="code-name">.dx-chexiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-24gl-fontSize"></span>
            <div class="name">
              24gl-fontSize
            </div>
            <div class="code-name">.dx-24gl-fontSize
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-jianqie"></span>
            <div class="name">
              剪切
            </div>
            <div class="code-name">.dx-jianqie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-font-colors"></span>
            <div class="name">
              字体颜色
            </div>
            <div class="code-name">.dx-font-colors
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-xiangpica"></span>
            <div class="name">
              橡皮擦
            </div>
            <div class="code-name">.dx-xiangpica
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-beijingse"></span>
            <div class="name">
              背景色
            </div>
            <div class="code-name">.dx-beijingse
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-guaduan"></span>
            <div class="name">
              挂断
            </div>
            <div class="code-name">.dx-guaduan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-jieting"></span>
            <div class="name">
              接听
            </div>
            <div class="code-name">.dx-jieting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-dianhua"></span>
            <div class="name">
              电话
            </div>
            <div class="code-name">.dx-dianhua
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-shipin"></span>
            <div class="name">
              视频
            </div>
            <div class="code-name">.dx-shipin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-xiaolian"></span>
            <div class="name">
              笑脸
            </div>
            <div class="code-name">.dx-xiaolian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-tupian1"></span>
            <div class="name">
              图片
            </div>
            <div class="code-name">.dx-tupian1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-yejian"></span>
            <div class="name">
              夜间
            </div>
            <div class="code-name">.dx-yejian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-ziyuan"></span>
            <div class="name">
              晴_白天
            </div>
            <div class="code-name">.dx-ziyuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-weixin"></span>
            <div class="name">
              微信
            </div>
            <div class="code-name">.dx-weixin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-shuaxin1"></span>
            <div class="name">
              刷新
            </div>
            <div class="code-name">.dx-shuaxin1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-sousuo"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.dx-sousuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-xiala"></span>
            <div class="name">
              下拉
            </div>
            <div class="code-name">.dx-xiala
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-zhifubaozhifu"></span>
            <div class="name">
              支付宝支付
            </div>
            <div class="code-name">.dx-zhifubaozhifu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-tongzhi"></span>
            <div class="name">
              通知
            </div>
            <div class="code-name">.dx-tongzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-youjiantou"></span>
            <div class="name">
              右箭头
            </div>
            <div class="code-name">.dx-youjiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-shezhi1"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">.dx-shezhi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-github-fill"></span>
            <div class="name">
              github-fill
            </div>
            <div class="code-name">.dx-github-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-facebook-fill"></span>
            <div class="name">
              facebook-fill
            </div>
            <div class="code-name">.dx-facebook-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-suoxiao"></span>
            <div class="name">
              缩小
            </div>
            <div class="code-name">.dx-suoxiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-fangda"></span>
            <div class="name">
              放大
            </div>
            <div class="code-name">.dx-fangda
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-zuojiantou"></span>
            <div class="name">
              左箭头
            </div>
            <div class="code-name">.dx-zuojiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-zhongyingwenyingwen-01"></span>
            <div class="name">
              中英文 英文-01
            </div>
            <div class="code-name">.dx-zhongyingwenyingwen-01
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-closefill"></span>
            <div class="name">
              close_fill
            </div>
            <div class="code-name">.dx-closefill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-shezhi"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">.dx-shezhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-attachment"></span>
            <div class="name">
              attachment
            </div>
            <div class="code-name">.dx-attachment
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-edit"></span>
            <div class="name">
              edit
            </div>
            <div class="code-name">.dx-edit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-eye-close"></span>
            <div class="name">
              eye-close
            </div>
            <div class="code-name">.dx-eye-close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-email"></span>
            <div class="name">
              email
            </div>
            <div class="code-name">.dx-email
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-file-common"></span>
            <div class="name">
              file-common
            </div>
            <div class="code-name">.dx-file-common
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-fullscreen-shrink"></span>
            <div class="name">
              fullscreen-shrink
            </div>
            <div class="code-name">.dx-fullscreen-shrink
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-fullscreen-expand"></span>
            <div class="name">
              fullscreen-expand
            </div>
            <div class="code-name">.dx-fullscreen-expand
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-map"></span>
            <div class="name">
              map
            </div>
            <div class="code-name">.dx-map
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-help"></span>
            <div class="name">
              help
            </div>
            <div class="code-name">.dx-help
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-modular"></span>
            <div class="name">
              modular
            </div>
            <div class="code-name">.dx-modular
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-pin"></span>
            <div class="name">
              pin
            </div>
            <div class="code-name">.dx-pin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-save"></span>
            <div class="name">
              save
            </div>
            <div class="code-name">.dx-save
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-search"></span>
            <div class="name">
              search
            </div>
            <div class="code-name">.dx-search
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-scanning"></span>
            <div class="name">
              scanning
            </div>
            <div class="code-name">.dx-scanning
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-shuaxin"></span>
            <div class="name">
              刷新
            </div>
            <div class="code-name">.dx-shuaxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-tupian"></span>
            <div class="name">
              图片
            </div>
            <div class="code-name">.dx-tupian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-wenbenbianji"></span>
            <div class="name">
              文本编辑
            </div>
            <div class="code-name">.dx-wenbenbianji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-shanchu"></span>
            <div class="name">
              删除
            </div>
            <div class="code-name">.dx-shanchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-huodong"></span>
            <div class="name">
              活动
            </div>
            <div class="code-name">.dx-huodong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-admin-manage"></span>
            <div class="name">
              admin-manage
            </div>
            <div class="code-name">.dx-admin-manage
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-gupiao-shouye"></span>
            <div class="name">
              股票-首页
            </div>
            <div class="code-name">.dx-gupiao-shouye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-user"></span>
            <div class="name">
              user
            </div>
            <div class="code-name">.dx-user
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-reduce"></span>
            <div class="name">
              reduce
            </div>
            <div class="code-name">.dx-reduce
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-bianjiwenzhang_huaban"></span>
            <div class="name">
              编辑文章
            </div>
            <div class="code-name">.dx-bianjiwenzhang_huaban
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-add"></span>
            <div class="name">
              add
            </div>
            <div class="code-name">.dx-add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-zhankaicaidan"></span>
            <div class="name">
              展开菜单
            </div>
            <div class="code-name">.dx-zhankaicaidan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-shijian"></span>
            <div class="name">
              时间
            </div>
            <div class="code-name">.dx-shijian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-shouqicaidan"></span>
            <div class="name">
              收起菜单
            </div>
            <div class="code-name">.dx-shouqicaidan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-close"></span>
            <div class="name">
              close
            </div>
            <div class="code-name">.dx-close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-right"></span>
            <div class="name">
              right
            </div>
            <div class="code-name">.dx-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-left"></span>
            <div class="name">
              left
            </div>
            <div class="code-name">.dx-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-toleft"></span>
            <div class="name">
              to left
            </div>
            <div class="code-name">.dx-toleft
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-caidan_o"></span>
            <div class="name">
              菜单_o
            </div>
            <div class="code-name">.dx-caidan_o
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-gouxuan"></span>
            <div class="name">
              勾选
            </div>
            <div class="code-name">.dx-gouxuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont dx-arrow-down"></span>
            <div class="name">
              arrow-down
            </div>
            <div class="code-name">.dx-arrow-down
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont dx-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-in_biyan"></use>
                </svg>
                <div class="name">AK-IN_闭眼</div>
                <div class="code-name">#dx-in_biyan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-xianshi_huaban"></use>
                </svg>
                <div class="name">显示</div>
                <div class="code-name">#dx-xianshi_huaban</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-dianliangbuzu"></use>
                </svg>
                <div class="name">电量不足</div>
                <div class="code-name">#dx-dianliangbuzu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-pc"></use>
                </svg>
                <div class="name">pc</div>
                <div class="code-name">#dx-pc</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-h5e"></use>
                </svg>
                <div class="name">h5e</div>
                <div class="code-name">#dx-h5e</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-xiaochengxu"></use>
                </svg>
                <div class="name">小程序</div>
                <div class="code-name">#dx-xiaochengxu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-tag"></use>
                </svg>
                <div class="name">tag</div>
                <div class="code-name">#dx-tag</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-radiobox"></use>
                </svg>
                <div class="name">radio_box</div>
                <div class="code-name">#dx-radiobox</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-pdf"></use>
                </svg>
                <div class="name">pdf</div>
                <div class="code-name">#dx-pdf</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-ai-img-list"></use>
                </svg>
                <div class="name">图片列表</div>
                <div class="code-name">#dx-ai-img-list</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-shijianriqi"></use>
                </svg>
                <div class="name">时间日期</div>
                <div class="code-name">#dx-shijianriqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-biaodanzujian-xialakuang"></use>
                </svg>
                <div class="name">表单组件-下拉框</div>
                <div class="code-name">#dx-biaodanzujian-xialakuang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-duohangwenben"></use>
                </svg>
                <div class="name">多行文本</div>
                <div class="code-name">#dx-duohangwenben</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-video"></use>
                </svg>
                <div class="name">video</div>
                <div class="code-name">#dx-video</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-24gl-calendar"></use>
                </svg>
                <div class="name">24gl-calendar</div>
                <div class="code-name">#dx-24gl-calendar</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-Field-number"></use>
                </svg>
                <div class="name">Field-number</div>
                <div class="code-name">#dx-Field-number</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-ditu"></use>
                </svg>
                <div class="name">地图</div>
                <div class="code-name">#dx-ditu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-m-fuwenben"></use>
                </svg>
                <div class="name">m-富文本</div>
                <div class="code-name">#dx-m-fuwenben</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-shurukuang"></use>
                </svg>
                <div class="name">输入框</div>
                <div class="code-name">#dx-shurukuang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-map1"></use>
                </svg>
                <div class="name">map</div>
                <div class="code-name">#dx-map1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-shujuzhongxinshujucangku"></use>
                </svg>
                <div class="name">数据中心—数据仓库</div>
                <div class="code-name">#dx-shujuzhongxinshujucangku</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-shoukuan"></use>
                </svg>
                <div class="name">收款</div>
                <div class="code-name">#dx-shoukuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-gaojing"></use>
                </svg>
                <div class="name">告警</div>
                <div class="code-name">#dx-gaojing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-chongdianqi"></use>
                </svg>
                <div class="name">充电器</div>
                <div class="code-name">#dx-chongdianqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-yonghuguanli_huaban"></use>
                </svg>
                <div class="name">用户管理</div>
                <div class="code-name">#dx-yonghuguanli_huaban</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-img"></use>
                </svg>
                <div class="name">img</div>
                <div class="code-name">#dx-img</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-biaoge"></use>
                </svg>
                <div class="name">表格</div>
                <div class="code-name">#dx-biaoge</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-qiapian"></use>
                </svg>
                <div class="name">卡片</div>
                <div class="code-name">#dx-qiapian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx--fenye"></use>
                </svg>
                <div class="name">83-分页</div>
                <div class="code-name">#dx--fenye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-gengduoliebiao"></use>
                </svg>
                <div class="name">更多列表</div>
                <div class="code-name">#dx-gengduoliebiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-a-2duohangwenben"></use>
                </svg>
                <div class="name">2.多行文本</div>
                <div class="code-name">#dx-a-2duohangwenben</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-add1"></use>
                </svg>
                <div class="name">add</div>
                <div class="code-name">#dx-add1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-guanbi"></use>
                </svg>
                <div class="name">关闭</div>
                <div class="code-name">#dx-guanbi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-baocunwenshu"></use>
                </svg>
                <div class="name">保存文书</div>
                <div class="code-name">#dx-baocunwenshu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-dayin"></use>
                </svg>
                <div class="name">打印</div>
                <div class="code-name">#dx-dayin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-file-pdf"></use>
                </svg>
                <div class="name">file-pdf</div>
                <div class="code-name">#dx-file-pdf</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-jiesuo"></use>
                </svg>
                <div class="name">解锁</div>
                <div class="code-name">#dx-jiesuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-zhuanxiaji"></use>
                </svg>
                <div class="name">转下级</div>
                <div class="code-name">#dx-zhuanxiaji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-lunbotu"></use>
                </svg>
                <div class="name">轮播图</div>
                <div class="code-name">#dx-lunbotu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-jiantou_qiehuanxiangxia"></use>
                </svg>
                <div class="name">箭头_切换向下</div>
                <div class="code-name">#dx-jiantou_qiehuanxiangxia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-jiantou_qiehuanxiangshang"></use>
                </svg>
                <div class="name">箭头_切换向上</div>
                <div class="code-name">#dx-jiantou_qiehuanxiangshang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-houtui"></use>
                </svg>
                <div class="name">后退</div>
                <div class="code-name">#dx-houtui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-qianjin"></use>
                </svg>
                <div class="name">前进</div>
                <div class="code-name">#dx-qianjin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-24gl-pictureSplit"></use>
                </svg>
                <div class="name">24gl-pictureSplit</div>
                <div class="code-name">#dx-24gl-pictureSplit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-24gl-pictures"></use>
                </svg>
                <div class="name">24gl-pictures</div>
                <div class="code-name">#dx-24gl-pictures</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-wuxupailie"></use>
                </svg>
                <div class="name">无序排列</div>
                <div class="code-name">#dx-wuxupailie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-youxupailie"></use>
                </svg>
                <div class="name">有序排列</div>
                <div class="code-name">#dx-youxupailie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-liulan-copy"></use>
                </svg>
                <div class="name">浏览</div>
                <div class="code-name">#dx-liulan-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-zitijiacu"></use>
                </svg>
                <div class="name">字体加粗</div>
                <div class="code-name">#dx-zitijiacu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-24px"></use>
                </svg>
                <div class="name">打印机</div>
                <div class="code-name">#dx-24px</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-fuzhi"></use>
                </svg>
                <div class="name">复制</div>
                <div class="code-name">#dx-fuzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-icon-"></use>
                </svg>
                <div class="name">链接</div>
                <div class="code-name">#dx-icon-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-juzhongduiqi"></use>
                </svg>
                <div class="name">居中对齐</div>
                <div class="code-name">#dx-juzhongduiqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-youduiqi"></use>
                </svg>
                <div class="name">右对齐</div>
                <div class="code-name">#dx-youduiqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-zitixiahuaxian"></use>
                </svg>
                <div class="name">字体下划线</div>
                <div class="code-name">#dx-zitixiahuaxian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-zitixieti"></use>
                </svg>
                <div class="name">字体斜体</div>
                <div class="code-name">#dx-zitixieti</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-zuoduiqi"></use>
                </svg>
                <div class="name">左对齐</div>
                <div class="code-name">#dx-zuoduiqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-quanxuan"></use>
                </svg>
                <div class="name">全选</div>
                <div class="code-name">#dx-quanxuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-chexiao"></use>
                </svg>
                <div class="name">撤销</div>
                <div class="code-name">#dx-chexiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-24gl-fontSize"></use>
                </svg>
                <div class="name">24gl-fontSize</div>
                <div class="code-name">#dx-24gl-fontSize</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-jianqie"></use>
                </svg>
                <div class="name">剪切</div>
                <div class="code-name">#dx-jianqie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-font-colors"></use>
                </svg>
                <div class="name">字体颜色</div>
                <div class="code-name">#dx-font-colors</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-xiangpica"></use>
                </svg>
                <div class="name">橡皮擦</div>
                <div class="code-name">#dx-xiangpica</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-beijingse"></use>
                </svg>
                <div class="name">背景色</div>
                <div class="code-name">#dx-beijingse</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-guaduan"></use>
                </svg>
                <div class="name">挂断</div>
                <div class="code-name">#dx-guaduan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-jieting"></use>
                </svg>
                <div class="name">接听</div>
                <div class="code-name">#dx-jieting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-dianhua"></use>
                </svg>
                <div class="name">电话</div>
                <div class="code-name">#dx-dianhua</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-shipin"></use>
                </svg>
                <div class="name">视频</div>
                <div class="code-name">#dx-shipin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-xiaolian"></use>
                </svg>
                <div class="name">笑脸</div>
                <div class="code-name">#dx-xiaolian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-tupian1"></use>
                </svg>
                <div class="name">图片</div>
                <div class="code-name">#dx-tupian1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-yejian"></use>
                </svg>
                <div class="name">夜间</div>
                <div class="code-name">#dx-yejian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-ziyuan"></use>
                </svg>
                <div class="name">晴_白天</div>
                <div class="code-name">#dx-ziyuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-weixin"></use>
                </svg>
                <div class="name">微信</div>
                <div class="code-name">#dx-weixin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-shuaxin1"></use>
                </svg>
                <div class="name">刷新</div>
                <div class="code-name">#dx-shuaxin1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-sousuo"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#dx-sousuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-xiala"></use>
                </svg>
                <div class="name">下拉</div>
                <div class="code-name">#dx-xiala</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-zhifubaozhifu"></use>
                </svg>
                <div class="name">支付宝支付</div>
                <div class="code-name">#dx-zhifubaozhifu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-tongzhi"></use>
                </svg>
                <div class="name">通知</div>
                <div class="code-name">#dx-tongzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-youjiantou"></use>
                </svg>
                <div class="name">右箭头</div>
                <div class="code-name">#dx-youjiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-shezhi1"></use>
                </svg>
                <div class="name">设置</div>
                <div class="code-name">#dx-shezhi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-github-fill"></use>
                </svg>
                <div class="name">github-fill</div>
                <div class="code-name">#dx-github-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-facebook-fill"></use>
                </svg>
                <div class="name">facebook-fill</div>
                <div class="code-name">#dx-facebook-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-suoxiao"></use>
                </svg>
                <div class="name">缩小</div>
                <div class="code-name">#dx-suoxiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-fangda"></use>
                </svg>
                <div class="name">放大</div>
                <div class="code-name">#dx-fangda</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-zuojiantou"></use>
                </svg>
                <div class="name">左箭头</div>
                <div class="code-name">#dx-zuojiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-zhongyingwenyingwen-01"></use>
                </svg>
                <div class="name">中英文 英文-01</div>
                <div class="code-name">#dx-zhongyingwenyingwen-01</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-closefill"></use>
                </svg>
                <div class="name">close_fill</div>
                <div class="code-name">#dx-closefill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-shezhi"></use>
                </svg>
                <div class="name">设置</div>
                <div class="code-name">#dx-shezhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-attachment"></use>
                </svg>
                <div class="name">attachment</div>
                <div class="code-name">#dx-attachment</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-edit"></use>
                </svg>
                <div class="name">edit</div>
                <div class="code-name">#dx-edit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-eye-close"></use>
                </svg>
                <div class="name">eye-close</div>
                <div class="code-name">#dx-eye-close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-email"></use>
                </svg>
                <div class="name">email</div>
                <div class="code-name">#dx-email</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-file-common"></use>
                </svg>
                <div class="name">file-common</div>
                <div class="code-name">#dx-file-common</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-fullscreen-shrink"></use>
                </svg>
                <div class="name">fullscreen-shrink</div>
                <div class="code-name">#dx-fullscreen-shrink</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-fullscreen-expand"></use>
                </svg>
                <div class="name">fullscreen-expand</div>
                <div class="code-name">#dx-fullscreen-expand</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-map"></use>
                </svg>
                <div class="name">map</div>
                <div class="code-name">#dx-map</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-help"></use>
                </svg>
                <div class="name">help</div>
                <div class="code-name">#dx-help</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-modular"></use>
                </svg>
                <div class="name">modular</div>
                <div class="code-name">#dx-modular</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-pin"></use>
                </svg>
                <div class="name">pin</div>
                <div class="code-name">#dx-pin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-save"></use>
                </svg>
                <div class="name">save</div>
                <div class="code-name">#dx-save</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-search"></use>
                </svg>
                <div class="name">search</div>
                <div class="code-name">#dx-search</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-scanning"></use>
                </svg>
                <div class="name">scanning</div>
                <div class="code-name">#dx-scanning</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-shuaxin"></use>
                </svg>
                <div class="name">刷新</div>
                <div class="code-name">#dx-shuaxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-tupian"></use>
                </svg>
                <div class="name">图片</div>
                <div class="code-name">#dx-tupian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-wenbenbianji"></use>
                </svg>
                <div class="name">文本编辑</div>
                <div class="code-name">#dx-wenbenbianji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-shanchu"></use>
                </svg>
                <div class="name">删除</div>
                <div class="code-name">#dx-shanchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-huodong"></use>
                </svg>
                <div class="name">活动</div>
                <div class="code-name">#dx-huodong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-admin-manage"></use>
                </svg>
                <div class="name">admin-manage</div>
                <div class="code-name">#dx-admin-manage</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-gupiao-shouye"></use>
                </svg>
                <div class="name">股票-首页</div>
                <div class="code-name">#dx-gupiao-shouye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-user"></use>
                </svg>
                <div class="name">user</div>
                <div class="code-name">#dx-user</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-reduce"></use>
                </svg>
                <div class="name">reduce</div>
                <div class="code-name">#dx-reduce</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-bianjiwenzhang_huaban"></use>
                </svg>
                <div class="name">编辑文章</div>
                <div class="code-name">#dx-bianjiwenzhang_huaban</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-add"></use>
                </svg>
                <div class="name">add</div>
                <div class="code-name">#dx-add</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-zhankaicaidan"></use>
                </svg>
                <div class="name">展开菜单</div>
                <div class="code-name">#dx-zhankaicaidan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-shijian"></use>
                </svg>
                <div class="name">时间</div>
                <div class="code-name">#dx-shijian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-shouqicaidan"></use>
                </svg>
                <div class="name">收起菜单</div>
                <div class="code-name">#dx-shouqicaidan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-close"></use>
                </svg>
                <div class="name">close</div>
                <div class="code-name">#dx-close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-right"></use>
                </svg>
                <div class="name">right</div>
                <div class="code-name">#dx-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-left"></use>
                </svg>
                <div class="name">left</div>
                <div class="code-name">#dx-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-toleft"></use>
                </svg>
                <div class="name">to left</div>
                <div class="code-name">#dx-toleft</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-caidan_o"></use>
                </svg>
                <div class="name">菜单_o</div>
                <div class="code-name">#dx-caidan_o</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-gouxuan"></use>
                </svg>
                <div class="name">勾选</div>
                <div class="code-name">#dx-gouxuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#dx-arrow-down"></use>
                </svg>
                <div class="name">arrow-down</div>
                <div class="code-name">#dx-arrow-down</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
